<template>
  <div class="page">
    <a-breadcrumb style="margin-bottom:12px">
      <a-breadcrumb-item><router-link to="/">首页</router-link></a-breadcrumb-item>
      <a-breadcrumb-item>归档</a-breadcrumb-item>
    </a-breadcrumb>

    <a-card>
      <a-pagination :current="pageNo" :page-size="pageSize" :total="total" show-size-changer style="margin-bottom:12px" @change="onPageChange" @showSizeChange="onSizeChange" />
      <a-collapse accordion>
        <a-collapse-panel v-for="(months, year) in grouped" :key="year" :header="`${year}`">
          <a-collapse>
            <a-collapse-panel v-for="(items, ym) in months" :key="ym" :header="`${ym}（${items.length}）`">
              <a-list :data-source="items" :split="false">
                <template #renderItem="{ item }">
                  <a-list-item class="archive-item">
                    <a @click="goDetail(item.id)">{{ item.title }}</a>
                    <span class="time">{{ fmt(item.createTime) }}</span>
                  </a-list-item>
                </template>
              </a-list>
            </a-collapse-panel>
          </a-collapse>
        </a-collapse-panel>
      </a-collapse>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { pageArchives } from '@/api/public/articles'
import type { ArticleArchiveItemVO } from '@/types/api'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'

const router = useRouter()
const list = ref<ArticleArchiveItemVO[]>([])
const loading = ref(false)
const pageNo = ref(1)
const pageSize = ref(50)
const total = ref(0)

function fmt(s: string) {
  return dayjs(s).format('YYYY-MM-DD')
}

const grouped = computed(() => {
  const map: Record<string, Record<string, ArticleArchiveItemVO[]>> = {}
  for (const it of list.value) {
    const y = dayjs(it.createTime).format('YYYY')
    const m = dayjs(it.createTime).format('YYYY-MM')
    map[y] ||= {}
    ;(map[y][m] ||= []).push(it)
  }
  return map
})

function goDetail(id: number) {
  router.push({ name: 'ArticleDetail', params: { id } })
}

async function onPageChange(p: number) {
  pageNo.value = p
  loading.value = true
  try {
    const { data } = await pageArchives(pageNo.value, pageSize.value)
    list.value = data.records || []
    total.value = data.total || 0
  } finally {
    loading.value = false
  }
}

async function onSizeChange(_: number, size: number) {
  pageSize.value = size
  pageNo.value = 1
  await onPageChange(1)
}

onMounted(async () => {
  loading.value = true
  try {
    const { data } = await pageArchives(pageNo.value, pageSize.value)
    list.value = data.records || []
    total.value = data.total || 0
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
.page { max-width: 960px; margin: 0 auto; padding: 12px; }
.group { margin-bottom: 16px; }
.group-title { font-weight: 600; margin: 8px 0; }
.archive-item { display: flex; justify-content: space-between; }
.time { color: rgba(0,0,0,0.45); margin-left: 12px; }
@media (max-width: 576px) {
  .archive-item { flex-direction: column; gap: 4px; }
  .time { margin-left: 0; }
}
</style>
